<template>
  <div class="hist-list">

    <div class="logout" @click="logout">
      <div class="logout-icon"></div>
      <div class="text">注销</div>
    </div>

    <div class="search">
      <div class="search-bar">
        <el-input v-model="keyword" autosize placeholder="请输入菜品名称/桌位号搜索" size="medium">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="search-button">
        <div class="button-item button-text white" @click="refresh">查询</div>
        <div class="button-item button-text grey" @click="goBack">返回</div>
      </div>
    </div>

    <div class="list-body">
      <div class="scroll">
        <div class="list-items" v-for="(item,i) in data" v-bind:key="i">
          <div class="list-name">{{ item.itemName }}
				<span v-if="item.method && item.method.length>0">
					（<span v-for="(label, j) in item.method" :key="j"><span v-if="j>0"> | </span>{{ label }}</span>）
				</span>
		  </div>
		  <div class="list-count">{{ item.lastQty ? 'x' + item.lastQty : '' }}</div>
          <div class="list-type">{{ item.sourceType === 1?'堂食':'外卖' }}</div>
          <div class="list-seat small-font"> {{ item.tableName }} </div>
          <div class="list-time small-font">操作时间：{{  item.operTime }}</div>
          <div class="list-status small-font">状态：{{ item.statusName  }}</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import api from "../api.js"
import util from "../util.js"

export default {
	data() {
		return {
		  keyword: '',
		  data: []
		}
	},
	mounted: function() {
		this.refresh();
	},
  
	methods: {
		logout: function() {
			util.logout();
			this.$router.replace({
				name: "login"
			});
		},

		refresh: function() {
  			let keyword = this.keyword?this.keyword:"";
			util.request(this, api.GetPrepareHistory, {keyword}, "GET")
			.then(res => {
				let list = res.data;
				list.forEach(item => {
					if (item.status == 1) {
							item.statusName = '待配';
						} else if (item.status == 2) {
							item.statusName = '已配';
						} else if (item.status == 3) {
							item.statusName = '完成';
						} else {
							item.statusName = '  ';
						}
				})
				this.data = list;
			})
			.catch(err => {
				this.$message.error(err.data.errmsg);
			})
		},
	  
	  goBack: function() {
		  this.$router.go(-1);
	  }
  }
}
</script>

<style lang="css" scoped>
@import "~@/assets/css/common.css";
@import "~@/assets/css/list.css";
</style>
